<template>
  <div class="member-wrap" style="padding-top: 46px;">
    <van-nav-bar
    title="添加会员"
    left-arrow
    fixed
    right-text="搜索"
    @click-right="isShowSearch = !isShowSearch"
    @click-left="$router.go(-1)"
  />
  <transition name="van-slide-down">
    <van-search v-show="isShowSearch" placeholder="请输入搜索关键词( 姓名 / 手机号码 / 昵称 )" show-action v-model="keywords">
      <div slot="action" @click="searchs">搜索</div>
    </van-search>
  </transition>
  
  <div v-if="userData">
    <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onSearch"
  >
    <van-row class="userList" v-for="(item,index) in userData" :key="index" type="flex"  justify="space-between">
        <van-col span="4">
          <van-image
              round
              width="3rem"
              height="3rem"
              :src="item.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'"
            />
        </van-col>
        <van-col span="16">
          <div class="van-multi-ellipsis--l2">ID: {{ item.id }} 昵称 : {{ item.nickname }}</div>
        </van-col>
        <van-col span="4" style="line-height: 3rem" class="text-align"><van-button type="info" size="small" @click="addMember(item.id)">添加</van-button></van-col>
      </van-row>
  </van-list>
  </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props:['store_id'],
  name: 'Member',
  data() {
    return {
      isShowSearch: true,
      keywords: null,
      loading: !1,
      finished:false,
      userData: null,
      page: null
    }
  },
  methods:{
    async onSearch(){
      let params = {
        token: sessionStorage.getItem('token'),
        page: this.page + 1,
        keywords: this.keywords
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '搜索中...'
      });
      const res = await axios.get('/api/store/manager/search',{params});
      if(res.data.data.data.length == 0){
        this.$toast('没有找到相关内容');
      }else {
        this.$toast('成功');
      }
      this.isShowSearch = false;
      if(res.data.data.current_page == 1){
        this.userData = res.data.data.data;
      }else {
        this.userData = [...this.userData,...res.data.data.data];
      }
      this.page = res.data.data.current_page;
      this.loading = false;
      if(this.page >=  res.data.data.last_page){
        this.finished = true;
        this.loading = false;
      }
    },
    searchs(){
      this.page = null;
      this.userData= null;
      this.onSearch()
    },
    async addMember(id){
      let params = {
        token: sessionStorage.getItem('token'),
      }
      const res = await axios.post(`/api/store/manager/add_member/${id}`,params);
      this.$toast.success('添加成功');
      this.$router.go(-1);
    }
     
  }
}
</script>
<style lang="less">
.member-wrap {
  .userList {
    background: white;
    margin-bottom: 5px;
    padding: 0.7692rem 1.1538rem
 } 
}
 
</style>
